<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction :instruction="instruction"></play-instruction>
    <lottery-dice-only 
      v-for="item in getCurrentLotteryState" 
      :key="item.id"
      :item="item"
      @click='handleUpdateData'
      >
    </lottery-dice-only>
  </div>
  <div class="number-select-phone" v-else>
    <lottery-dice-only-phone 
      v-for="(item, index) in getCurrentLotteryState" 
      :key="item.id"
      :item="item"
      :class="'dice-same-adjust-' + index"
      @click='handleUpdateData'
      class
      >
    </lottery-dice-only-phone>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryDiceOnly from '@/components/lottery-type/common/lottery-dice-only'
import LotteryDiceOnlyPhone from '@/components/lottery-type/common/lottery-dice-only-phone'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'
export default {
  mixins: [boxWithCleanerMixin],
  components: {
    PlayInstruction,
    LotteryDiceOnly,
    LotteryDiceOnlyPhone
  },
  data() {
    return {
      instruction: '快三二同号单选'
    }
  }
  
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (max-width 750px) 
    .number-select-phone >>> .dice-adjust 
      width 33.33% !important
    .dice-same-adjust-1 >>> .dice-adjust 
      width 16.66% !important

</style>